<template>
  <!-- v-pagePermissions="pagePermissions"  -->
  <div class="white-bg commonBoxmp">
    <TableV2
      :apiFunction="listUser"
      selection
      :operation="state.operation"
      @selection-change="handleselectionChange"
      ref="tableV2Ref"
      :columns="state.columnData"
    >
    </TableV2>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import testAttributes from "/@/views/table/component/testAttributes.vue";
import selectV2 from "/@/components/selectV2/index.vue";
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
} from "./api";

const router = useRouter();
const route = useRoute();

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装,
ref定义的数据访问的时候要多一个.value
*/
const dialogVisible = ref(true);
const tableV2Ref = ref();

const state = reactive<{
  columnData: TableColumn[];
  operation: TableColumn;
  loading: boolean;
}>({
  columnData: [
    {
      label: "用户名称",
      prop: "userName",
      visible: true,

      renderHeader: ({ column }: any) => {
        return (
          <filterBox
            title={column.label}
            valueKey={column.property}
            flterType="input"
            onChange={tableV2Ref.value.handleFilterBox}
            data={tableV2Ref.value.formFilter}
          ></filterBox>
        );
      },
    },
    {
      label: "用户昵称",
      prop: "nickName",
      visible: true,
      renderHeader: ({ column }: any) => {
        return (
          <filterBox
            title={column.label}
            valueKey={column.property}
            flterType="input"
            onChange={tableV2Ref.value.handleFilterBox}
            data={tableV2Ref.value.formFilter}
          ></filterBox>
        );
      },
    },
    {
      label: "部门",
      prop: "dept.deptName",
      visible: true,
    },
    {
      label: "子集",
      visible: true,
      prop: "children",
      children: [
        {
          label: "用户名称",
          visible: true,
          prop: "userName",
          render: ({ row }: any) => {
            return <div>{row.userName}</div>;
          },
        },
        {
          label: "用户昵称",
          prop: "nickName",
          visible: true,
        },
        {
          label: "部门",
          prop: "dept.deptName",
          visible: true,
        },
      ],
    },
    {
      label: "手机号",
      prop: "phonenumber",

      visible: true,
    },
    {
      label: "状态",
      prop: "status",
      visible: true,
    },
  ],
  loading: false,
  operation: {
    label: "操作",
    prop: "操作",
    width: "180",
    fixed: "right",
    visible: true,
    render: ({ row }: any) => {
      return (
        <div>
          <el-button type="primary" size="small">
            编辑
          </el-button>
          <el-button type="danger" size="small">
            删除
          </el-button>
        </div>
      );
    },
  },
});
const pageInfo = reactive({
  currentPage: 1,
  total: 10,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
  layout: "total, prev, pager, next,sizes",
});
const handleselectionChange = (val: any) => {
  console.log(val);
};
// const queryParams = reactive({
//   pageNum: 1,
//   pageSize: 10,
//   deptId: undefined,
// });
onMounted(() => {});
</script>

<style scoped lang="scss"></style>
